<script lang="ts">
export default {
  name: 'examineRecord',
  description: '审核记录',
};
</script>

<script setup lang="ts">
import { ElForm, ElMessage,ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue';
import { Search, Refresh, Plus ,Download} from '@element-plus/icons-vue';
import { orderGetById,orderSettlementExport,orderSettlementAllExport, financeExamineExport } from '@/api/order/index';
import {
  ExamineRecordQuery,
  ExamineRecord,
  ExamineRecordForm,
} from '@/api/system/examineRecord/types';
import {
  checkOptions,
  businessOptions,
  internalOptions,
  enterpriseOptions,
  personOptions,
  engineerOptions,
  casualCheckRecordPages,
} from '@/api/system/examineRecord/index';
import settlementFrom from '@/views/order/components/settlementFrom.vue';
import orderFrom from '@/views/order/components/orderFrom.vue';
import ExamineList from "@/views/order/components/examineList.vue";
import { casualCheckRecordExamine,casualCheckRecordRejectReview } from '@/api/system/examineRecord/index';
import { orderGetCasualCheckRecord } from '@/api/order/index';
import { string } from 'vue-types';

const queryFormRef = ref(ElForm);
const refSetFrom = ref();
const examineListRef = ref();
const { proxy }: any = getCurrentInstance();
const state = reactive({
  loading: false,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  } as ExamineRecordQuery,
  dataList: [] as ExamineRecord[],
  total: 0,
  dialog: {
    title: '',
    visible: false,
  } as DialogType,
  formData: {} as ExamineRecordForm,
  rules: {
    businessAuditorType: [
      { required: true, message: '请选择审核人类型', trigger: 'change' },
    ],
    businessType: [
      { required: true, message: '请选择业务类型', trigger: 'change' },
    ],
    checkId: [{ required: true, message: '请选择审核人', trigger: 'change' }],
    sort: [{ required: true, message: '请填写排序', trigger: 'change' }],
    remark: [{ required: false, message: '请填写备注', trigger: 'change' }],
  },
  handleSelectionChangeList:[] as string[],
  checkOption: [] as OptionType[],
  businessOption: [] as OptionType[],
  casualCheckRecord: [] as OptionType[],
  internalOption: [] as OptionType[],
  enterpriseOption: [] as OptionType[],
  personOption: [] as OptionType[],
  engineerOption: [] as OptionType[],
  option: [] as OptionType[],
  createTime: [] as string[],
});
const refFrom = ref();
const {
  loading,
  queryParams,
  dataList,
  total,
  dialog,
  formData,
  rules,
  checkOption,
  businessOption,
  casualCheckRecord,
  internalOption,
  enterpriseOption,
  personOption,
  engineerOption,
  option,
  handleSelectionChangeList,
  createTime
} = toRefs(state);
/**
 * 下拉框查询
 */
function options() {
  checkOptions().then((res: any) => {
    checkOption.value = res.data;
  });
  businessOptions().then((res: any) => {
    businessOption.value = res.data;
  });
  orderGetCasualCheckRecord().then((res:any)=>{
    casualCheckRecord.value = res.data;
  })
  internalOptions().then((res: any) => {
    internalOption.value = res.data;
  });
  enterpriseOptions().then((res: any) => {
    enterpriseOption.value = res.data;
  });
  personOptions().then((res: any) => {
    personOption.value = res.data;
  });
  engineerOptions().then((res: any) => {
    engineerOption.value = res.data;
  });
}

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  if (createTime.value.length == 2) {
    queryParams.value.createTimeStart = proxy
      .$moment(createTime.value[0])
      .format('YYYY-MM-DD');
    queryParams.value.createTimeEnd = proxy
      .$moment(createTime.value[1])
      .format('YYYY-MM-DD');
  } else {
    queryParams.value.createTimeStart = undefined
    queryParams.value.createTimeEnd = undefined
  }
  casualCheckRecordPages(queryParams.value).then((res: any) => {
    dataList.value = res.data.list;
    total.value = res.data.total;
    loading.value = false;
  });
}
/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  createTime.value = []
  handleQuery();
}

function submitOk() {
  resetQuery();
}
function handleDetails(row: any) {
  orderGetById(row.businessId).then(res=>{
    refFrom.value.details(res.data);
    refFrom.value.disabled = true;
    refFrom.value.dialog.visible = true;
    refFrom.value.dialog.title = '用工订单详情';
  })
}
function through(row : any){
  ElMessageBox.prompt('备注', '同意审核', {
		confirmButtonText: '确定',
		showCancelButton:false,
		showClose:false,
    inputType: 'textarea',
    inputErrorMessage: '请输入备注',
  }).then(({ value }) => {
    let param = {
      businessId: row.businessId as number,
      businessType: '1',
      id:row.id,
      remark: value as string,
    };
    casualCheckRecordExamine(param).then((res) => {
     ElMessage.success('同意审核成功');
     dialog.value.visible = false;
     submitOk()
    });
  });
}
function reject(row : any){
  ElMessageBox.prompt('备注', '驳回审核', {
		confirmButtonText: '确定',
		showCancelButton:false,
		showClose:false,
    inputType: 'textarea',
    inputErrorMessage: '请输入备注',
  }).then(({ value }) => {
    let param = {
      businessId: row.businessId as number,
      businessType: '1',
      id:row.id,
      remark: value as string,
    };
    casualCheckRecordRejectReview(param).then((res) => {
     ElMessage.success('驳回审核成功');
     submitOk()
     dialog.value.visible = false;
    });
  });
}
function handleExamine(row: ExamineRecord) {
  if (row.businessType == '1') {
    orderGetById(row.businessId).then((res) => {
      refSetFrom.value.dialog.visible = true;
      refSetFrom.value.dialog.title = '用工订单结算详情';
      refSetFrom.value.ifexamine = true;
      refSetFrom.value.examineRow = row;
      refSetFrom.value.formData = res.data;
      refSetFrom.value.reset();
    });
  }
}
function handleSelectionChange(e:[string]){
  state.handleSelectionChangeList = e.map((item:any)=>{
    return item.businessId
  })
}
function exportExamine(){
  console.log(state.handleSelectionChangeList);

  orderSettlementExport(state.handleSelectionChangeList.join(',')).then((res:any)=>{
    console.log(res);
    let blob = new Blob([res.data])
    let url = window.URL.createObjectURL(blob);
    let eleLink = document.createElement('a');
    eleLink.href = url
    eleLink.download = '用工订单结算详情.xlsx'
    document.body.appendChild(eleLink)
    eleLink.click()
    window.URL.revokeObjectURL(url)
  })
}

function exportFinanceExamine() {
  financeExamineExport(state.handleSelectionChangeList.join(',')).then((res:any)=> {
    console.log(res);
    let blob = new Blob([res.data])
    let url = window.URL.createObjectURL(blob);
    let eleLink = document.createElement('a');
    eleLink.href = url
    eleLink.download = '财务报税数据.xlsx'
    document.body.appendChild(eleLink)
    eleLink.click()
    window.URL.revokeObjectURL(url)
  })
}

function exportAllExamine() {
  orderSettlementAllExport(state.handleSelectionChangeList.join(',')).then((res:any)=>{
    console.log(res);
    let blob = new Blob([res.data])
    let url = window.URL.createObjectURL(blob);
    let eleLink = document.createElement('a');
    eleLink.href = url
    eleLink.download = '用工订单结算详情.xlsx'
    document.body.appendChild(eleLink)
    eleLink.click()
    window.URL.revokeObjectURL(url)
  })
}

function getExamineList(row: any) {
  console.log("row", row)
  examineListRef.value.open(row.businessId);
}

onMounted(() => {
  options();
  handleQuery();
});
</script>

<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="订单标题">
          <el-input v-model="queryParams.businessTitle" placeholder="请输入订单标题" />
        </el-form-item>
        <el-form-item label="订单编码" >
          <el-input v-model="queryParams.businessCode" placeholder="请输入订单编码" />
        </el-form-item>
        <el-form-item label="审核人类型" prop="businessAuditorType">
          <el-select style="width: 200px;" v-model="queryParams.businessAuditorType" placeholder="请选择审核人类型">
            <el-option v-for="item in checkOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型" prop="businessType">
          <el-select style="width: 200px;" v-model="queryParams.businessType" placeholder="请选择业务类型">
            <el-option v-for="item in businessOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="checkName">
          <el-input v-model="queryParams.checkName" placeholder="请输入审核人" />
        </el-form-item>
        <el-form-item label="审核状态" prop="isCheck">
          <el-select style="width: 200px;" v-model="queryParams.isCheck" placeholder="请选择审核状态">
            <el-option v-for="item in casualCheckRecord" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="提交时间" prop="isCheck">
          <el-date-picker
            v-model="createTime"
            type="datetimerange"
            format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜 索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重 置</el-button>
          <el-button :icon="Download" @click="exportExamine">审核完成导出</el-button>
          <el-button :icon="Download" @click="exportAllExamine">全部导出</el-button>
          <el-button :icon="Download" @click="exportFinanceExamine">财务报税数据</el-button> 
        </el-form-item>
      </el-form>
    </div>

    <el-card>
      <!--toolbar-->
      <!-- <template #header>
        <el-button type="success" :icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </template> -->
      <el-table ref="dataTableRef" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" highlight-current-row border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单标题" prop="businessTitle" min-width="200" />
        <el-table-column label="下单账号" prop="principalAccountName" min-width="100" />
        <el-table-column label="业务类型" prop="businessTypeName" min-width="160" />
        <el-table-column label="提交时间" prop="createTimes" min-width="160" />
        <el-table-column label="业务编号" prop="businessCode" min-width="160" >
          <template #default="scope">
            <a style="color:#64aafa" @click.stop="handleDetails(scope.row)">{{scope.row.businessCode}}</a>
          </template>
        </el-table-column>
        <el-table-column label="审核人类型" prop="businessAuditorTypeName" min-width="160" />
        <el-table-column label="审核人名称" prop="checkName" min-width="160" />
        <el-table-column label="审核状态" min-width="160">
          <template #default="scope">
            {{scope.row.isCheck == '0'? '未审核': scope.row.isCheck == '1'? '已审核': '已驳回'}}
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" min-width="160" />
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-button type="success" link @click.stop="handleExamine(scope.row)">详情</el-button>
            <el-button v-if="scope.row.isCheck == '0'" type="success" link @click.stop="through(scope.row)">通过</el-button>
            <el-button v-if="scope.row.isCheck == '0'" type="success" link @click.stop="reject(scope.row)">驳回</el-button>
            <el-button type="success" link @click.stop="getExamineList(scope.row)">
              审核详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- pagination -->
      <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>
  </div>
  <settlement-from ref="refSetFrom" @submitOk="submitOk"></settlement-from>
  <order-from ref="refFrom"></order-from>
  <examineList ref="examineListRef"></examineList>
</template>
